<template>
  <view>
    <view style="position:relative;" v-for="(item,index) in list" :key="index">
      <video :id="item._id" @play="add(item)" :src="item.video_url" show-center-play-btn="true"></video>
      <view class="name">
        <image :src="item.avatar"></image>
        <text style="margin-left: 10px">{{ item.name }}</text>
      </view>
      <view class="title">
        {{ item.video_title }}
      </view>
    </view>
    <view style="height: 150px" v-if="show"></view>
  </view>
</template>

<script>
import {
  videolist
} from "../../utils/API/classroom";

export default {

  data() {
    return {
      page: 0,
      list: [],
      show: false,
      indexCurrent: null,
      index:null
    };
  },
  mounted() {
    this.xuan()
  },
  methods: {
    //渲染
    async xuan() {
      let {data} = await videolist({page: this.page})
      if (data.length === 0) {
        this.show = true
      }
      this.list = [...this.list, ...data]
    },
    //点击播放
    add(item) {
      uni.createVideoContext(item._id, this).play()
      if(this.index!==null&&this.index!==item._id){
        uni.createVideoContext(this.index, this).pause()
      }
      this.index=item._id
    }
  },
  //上拉加载
  onReachBottom() {
    this.page++
    this.xuan()
  }
}
</script>

<style lang="scss" scoped>
video {
  width: 100%;
}

.name {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 10px;

  image {
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }
}

.title {
  font-size: 20px;
  position: absolute;
  top: 10px;
  color: #fff;
  left: 10px;
}
</style>
